<template>
<!-- 合格分包商列表页 -->
  <div class="page">
    <div class="top">
      <div class="left">
        <el-button size="mini" @click="exportss()">导出</el-button>
      </div>
      <div class="right"></div>
    </div>
    <div class="list">
      <el-table
        ref="multipleTable"
        :max-height="$store.state.tableHeight"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        class="table"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'multipleTable' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="工程分包商名称" width="250">
          <template slot-scope="scope">
            <span @click="Examine(scope.row.id)" style="color:blue; cursor: pointer;">
            {{
            scope.row.subcontractorName
          }}

            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="registerCapital"
          label="注册资本（万元）"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="creditCode"
          label="统一社会信用代码"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="manageOrgName"
          label="管理单位"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
         <el-table-column
          prop="type"
          label="类型"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="businessScopeName"
          label="主营范围"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="qualificationLevelName"
          label="资质等级"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="creditLevel"
          label="信用等级"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          prop="state"
          label="状态"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="theStatus"
          label="变更状态"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column> -->
      </el-table>
    </div>
    <div class="bottom">
      <ComPagination />
    </div>
  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination,
    },
    data () {
        return {
            tableData: [
                {
                    subcontractorName: '', //工程分包商名称
                    registerCapital: '', //注册资本
                    creditCode: '', //统一社会信用代码
                    manageOrgName: '', //管理单位
                    businessScopeName: '', //主营范围
                    qualificationLevelName: '', //资质等级
                    creditLevel: '', //信用等级
                    type: '', //类型

                },
            ],

        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
    //查询合格分包商列表数据
        getData () {

            this.$Ajax
                .httpPost({
                    url: '/outer/subcontractor/listByQualifiedEntity',
                    params: {
                        creditcode: '',
                        keyword: '',
                        limit: 10,
                        number: '',
                        page: 1,
                        subcontractorname: '',
                    },
                })
                .then(res => {
                    this.tableData = res.list
                })

        },
        //导出按钮
        exportss () {
            // this.$router.push('/subcontractorAdd')
        },

        handleSelectionChange (val) {
            this.multipleSelection = val
        },
        //点击表格查看对应信息
        Examine (id) {
            this.$router.push({
                path: '/qualifiedSubcontractorExamine',
                query: { id }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgb(239, 242, 246);
  border: 1px solid #ccc;
  border-radius: 5px;
  .top {
    height: 50px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    .left {
      flex: 1;
      ::v-deep.el-button--mini {
        margin-top: 10px;
        margin-left: 5px;
        color: #fff;
        background-color: rgb(122, 168, 24);
      }
    }
    .right {
      width: 300px;
    }
  }
  .list {
    flex: 1;
    margin-top: 10px;
  }
  .bottom {
    height: 50px;
    padding-bottom: 20px;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 10px; // 纵向滚动条
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 5px;
  }
}
</style>